<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="">
      </head>
      <body>
        <div id="demo">
                {{message}}<br/>
                <componet-a abc="123" config="abc"></componet-a>
        </div>
      </body>
      <script type="text/javascript">
      Vue.prototype.$bus = new Vue();
        var CompontA = {
            props: [ 'config' ],
            inject: ['a'],
            data(){
                return {}
            },
            render: function (_c, context) {
                return _c('a',{
                    attrs: {
                        href: 'javascript:;'
                    },
                    on: {
                        click: this.change
                    },
                },[this._v('abc')]);
            },
            methods: {
                change(){
                    this.a.a = 2;
                    this.$bus.$emit('abc');
                }
            }
        };
         var vm = new Vue({
            el:"#demo",
            provide: {
                a:{a:1}
            },
            data:{
                message:{a:1}
            },
            methods:{

            },
            created () {
              this.$bus.$on('abc', ()=>{
                  console.log('provide has changed!', this._provided);
              })
            },
            components : {
            'componet-a' : CompontA
            }
        });
      </script>
</html>